﻿@page "/chart/negative-stack"
@using Syncfusion.Blazor.Charts
@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;
<SampleDescription>
    <p>This sample illustrates stacked bar with negative data points. Data points values are showed by using data label.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render and configure the bar type charts. Similar to column charts, but the orientation of y axis is horizontal instead of vertical.You can use <code>Border</code>, <code>Fill</code> properties to customize the data appearance. <code>DataLabel</code> is used to represent individual data and its value.</p>
   <p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Height vs Weight" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Title="Height in Inches" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value} KG">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartData" XName="x" YName="y" Name="Female" Type="ChartSeriesType.StackingBar">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600"></ChartDataLabelFont>
                        </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartData" XName="x" YName="y1" Name="Male" Type="ChartSeriesType.StackingBar">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Name="text" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartLegendSettings Position="LegendPosition.Right"></ChartLegendSettings>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    public class NegativeStackChartData
    {
        public string x { get; set; }
        public double y { get; set; }
        public double y1 { get; set; }
        public string text { get; set; }
    }

    public List<NegativeStackChartData> ChartData = new List<NegativeStackChartData>
            {
                    new NegativeStackChartData { x= "4.5", y= 31, y1= -31, text= "31 KG" },
                    new NegativeStackChartData { x= "4.8", y= 37, y1= -39, text= "39 KG" },
                    new NegativeStackChartData { x= "5.1", y= 49, y1= -52, text= "52 KG" },
                    new NegativeStackChartData { x= "5.4", y= 57, y1= -64, text= "64 KG" },
                    new NegativeStackChartData { x= "5.7", y= 63, y1= -70, text= "70 KG" },
                    new NegativeStackChartData { x= "6",   y= 69, y1= -74, text= "74 KG" }
            };

    string CurrentUri;
    private Syncfusion.Blazor.Theme Theme { get; set; }
    protected override void OnInitialized()
    {
        CurrentUri = NavigationManager.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            Theme = Syncfusion.Blazor.Theme.Material;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            Theme = Syncfusion.Blazor.Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            Theme = Syncfusion.Blazor.Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            Theme = Syncfusion.Blazor.Theme.HighContrast;
        }
        else
        {
            Theme = Syncfusion.Blazor.Theme.Bootstrap4;
        }
    }
}
